<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>案例设计-</title>
	
<style>
/*去掉列表项目符号*/
	*{
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
	}
	a{text-decoration: none;font-size: 30px;color: #fff;}
	div{
		width:580px;
		height: 200px;/*像素对齐*/
		margin: 50px auto;/*居中*/
		position: absolute;
		top:20px;
		left:25%;
		
	}
	.a1,.a2{
		position: absolute;
		border: 1px solid #000000;
		border-radius: 5px;
		padding: 30px 10px;
		background-color: #000000;
		opacity: 0.7;/*透明*/
		text-decoration: none;/*隐藏元素*/
		color: white;
		display: none;
		content:"\u8ba1\u7b97\u673a\u4e00\u73ed\u77f3\u656c\u6bc5"
	}
	div:hover a{
		display: block;/*显示*/
		
	}
	.a1{
		left:-20px;
		top:25%;
	}
	.a2{
		right:-20px;
		top:25%;
	}
	
	ul{
		width:110px;
		height: 20px;
		opacity: 0.5;
		position: absolute;
		padding: 20px;
		right: 30px;
		bottom: 20px;
		background: #333;
		border-radius: 8px;
		text-align: center;
	}
	li{
		width: 5px;
		height: 5px;
		background: #ccc;
		border-radius: 50%;
		display: inline-block;/*变成行内块元素不独占整行*/
	}
	.max{
		width: 12px;
		background: #03bde4;
		border-radius: 6px;
	}
	</style>
</head>

<body>
<div>
	<img src="images/bg21.jpg" alt="">
<!--用字符串编码替代大于小于号-->
	<a href="" class="a1">&lt;</a>
	<a href="" class="a2">&gt;</a>
	<ul>
		<li class="max"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
</body>
</html>
